<template>
    <div>
       <el-card>
        <el-form
    ref="ruleFormRef"
    :model="ruleForm"
    label-width="60px"
    label-position="left"
    class="demo-ruleForm"
    size="default"
    inline
    status-icon
  >
    <el-form-item label="姓名" prop="name" >
      <el-input v-model="ruleForm.name" placeholder="请输入姓名"/>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="checkIn(ruleForm)"><el-icon><Search /></el-icon>&emsp13;查询</el-button>
    </el-form-item>
    <el-form-item style="position:absolute;right:50px;font-weight:600"><el-button @click="batchdel">删除选中</el-button></el-form-item>
        </el-form>
<!-- 表格 -->
<el-table
    ref="multipleTableRef"
    :data="data.tableData"
    :style="{ width: w + 'px' }"
    :border=true
    @selection-change="handleSelectionChange"
  >
    <el-table-column type="selection" width="55" />
    
    <el-table-column property="account" label="账号"  />
    <el-table-column property="purview" label="权限"  />
    <el-table-column property="name" label="姓名"  />
    <el-table-column property="sex" label="性别"  />
    <el-table-column property="phone" label="手机号" show-overflow-tooltip />
    <el-table-column label="账号操作" width="120">
      <template #default="scope">
      <el-button link type="primary" @click="viewInfo(scope.row,'view')"><el-icon><View /></el-icon></el-button>
      <el-button link type="primary" @click="deleteRow(scope.row)"><el-icon><DeleteFilled /></el-icon></el-button>
      <el-button link type="primary" @click="viewInfo(scope.row,'edit')"><el-icon><EditPen /></el-icon></el-button>
      </template>
    </el-table-column>
  </el-table>
 
    <el-dialog v-model="dialogTableVisible" :title="title">
      <Cform :defaultModel="curRow" @success="editInfo"/>
    </el-dialog>

    <div class="demo-pagination-block">
    
    <el-pagination
      v-model:current-page="data.pageinfo.page"
      v-model:page-size="data.pageinfo.size"
      :page-sizes="[10, 20, 50, 100]"
      small="small"
      layout="total,sizes, jumper, prev, pager, next "
      :total="data.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :disabled="disabled"
      :background="background"
      
    />
  </div>
       </el-card>
       
    </div>
</template>

<script setup lang="ts">
import { nextTick, onBeforeUnmount, onMounted, reactive, watch } from 'vue';
import { ref } from 'vue'
import { ElMessage, ElTable,ElMessageBox } from 'element-plus'
import { usersbatchdelReq, userseditReq, usersgetbyidReq, userslistReq, userssearchReq,usersdelReq } from '@/api/user/accmanage';
import { User } from '@/type/ljh';
import {useStore} from 'vuex';
import Cform from '../acccomponent/index.vue'
const store=useStore()

//表格大小适配
onMounted(() => {
    window.addEventListener('resize',tableResize)
})

onBeforeUnmount(() => {
    window.removeEventListener('resize',tableResize)
    
})
const w=ref()
//表格大小动态变化
const tableResize=()=>{
    
    w.value=document.body.offsetWidth-300
    
    
}



//表格样式功能相关
const multipleTableRef = ref<InstanceType<typeof ElTable>>()
const multipleSelection = ref<User[]>([])
//这个是选中项的数据
const handleSelectionChange =async (val: User[]) => {
  multipleSelection.value = val
  // console.log(val);
  data.ids=val.map(item=>item.id)
}
//删除选中项
const batchdel=async ()=>{
  console.log(data.ids);
  if(data.ids.length===0) return ;
  const res=await usersbatchdelReq(JSON.stringify(data.ids))
  console.log(res);
  ElMessage({
    message: res.data.msg,
    type: 'success',
  })
gettableList()

}

//删除某一项
const deleteRow= (row)=>{
  // console.log(row.id);
  ElMessageBox.confirm(
    '确认删除吗?此操作不可逆',
    'Warning',
    {
      confirmButtonText: 'OK',
      cancelButtonText: 'Cancel',
      type: 'warning',
    }
  )
    .then(async () => {
      const res=await usersdelReq(row.id)
      ElMessage({
        type: 'success',
        message: res.data.msg,
      })
gettableList()
    }).catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    })
}


//查询相关
const ruleForm=reactive({
    name:''
})

const checkIn=async (val)=>{
  console.log(val);
  const params={
    ...data.pageinfo,
    name:val.name
  }
  const res =await userssearchReq(params)
  data.tableData=res.data.data 
}

//定义初始数据
const data = reactive({
    //每一页的数据
    pageinfo: {
        page: 1,
        size: 10
    },
    ids:[],
    // 表格数据
    tableData:[],
    total:100,
    editInfo:{
      id:1,
      password:'',
      purview:'',
      phone:'',
      head:''
    }
})

//请求表格数据
const gettableList=async ()=>{
  const res=await userslistReq(data.pageinfo)
  console.log(res);
  data.tableData=res.data.data
  data.total=res.data.total
}
gettableList()

//分页相关
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
}
const background = ref(true)
const disabled = ref(false)

//监听pageinfo发生变化
watch(()=>data.pageinfo,()=>{
  gettableList()
},{deep:true})

//对话框相关
const dialogTableVisible=ref(false)
const title=ref('医务账号详情')
  
//编辑信息提交
const editInfo=async (val)=>{
  // console.log(val);
  if(val==='close') {
    dialogTableVisible.value=false
    return 
  }
  //改vuex
  const storeData=store.state.ljh.usersInfo;
  //循环传过来的数据，组装成接口数据
  Object.keys(data.editInfo).forEach(key=>{
    data.editInfo[key]=val[key];
    storeData[key]=val[key]
    storeData.head='http://129.211.169.131:21005/images/headers/'+storeData.head;
  store.commit('ljh/M_usersInfo',storeData)
  })

  
  const res=await userseditReq(data.editInfo)
  
  ElMessage({
    message: res.data.msg,
    type: 'success',
  })
  dialogTableVisible.value=false
  gettableList()

}

//给子组件传入当前行对应的信息
const viewInfo=async (val,type)=>{
  title.value=type==='edit'?'编辑账号':"医务账号详情"
  //用id请求详细数据，包括密码、身份证号
    const res=await usersgetbyidReq(val.id)
    console.log(res);
  dialogTableVisible.value=true
  res.data.data[0].flag=type==='edit'?true:false
  nextTick(() => {
        curRow.value =res.data.data[0]
    })
}

// 当前点击的那一项，用于弹框里面表单组件的回填
const curRow = ref({})
</script>

<style scoped lang="scss">
.el-form-item--default{
  font-weight: bold !important;
  // margin-left: 10px;
}
.demo-ruleForm{
  margin-bottom: 25px;
}
:deep .el-dialog {
  padding: 0 20px !important;
  width: 600px;
}
.el-pagination{
  margin-top: 20px;
}
</style>